<template>
  <div :class="`flex flex-col rounded-[8px] bg-white shadow-sm pb-4 `">
    <div
      class="flex flex-row items-center mb-2 bg-gradient-to-l from-[#F9FBFF] to-[#F0F6FE] pt-2 px-4 rounded-t-[8px] justify-between pb-1"
    >
      <div class="flex flex-row items-center">
        <img src="@/icons/svg/myXmate/time_icon.svg" class="mr-2" />
        <p>{{ item.createdTime.slice(0, 16) }}</p>
      </div>
      <p
        v-if="isTeam"
        v-show="item.managerViewed"
        class="text-[#436BFF] bg-[#F0F6FE] text-sm px-2 py-[0.5px] pt-[0.8px] rounded mr-2"
      >
        已查看
      </p>
      <p
        v-else
        :class="`${
          isSync ? 'text-[#436BFF]' : 'text-gray-400'
        } bg-[#F0F6FE] text-sm px-2 py-[0.5px] pt-[0.8px] rounded  mr-2`"
      >
        {{ item.syncStatus }}
      </p>
    </div>

    <div class="flex flex-row items-center mb-2 pt-2 px-4 rounded-[8px]">
      <div class="flex flex-row items-center min-w-0 flex-1">
        <h2 class="font-bold text-[16px] truncate">{{ item.subject }}</h2>

        <div class="flex-shrink-0 ml-2">
          <div
            v-if="isSuccessStatus"
            class="flex felx-row rounded-[4px] h-[20px] bg-gradient-to-l p-[0.8px] from-[#4CD2F4] to-[#7A1EFF]"
          >
            <div
              class="bg-white rounded-[4px] leading-[20px] text-[#436BFF] text-xs px-1 whitespace-nowrap"
            >
              {{ cp_reportStatus }}
            </div>
          </div>

          <div
            v-else
            :class="`px-2 py-[0.5px] pt-[2px] whitespace-nowrap text-xs text-orange-400 border-orange-300 rounded border`"
          >
            {{ cp_reportStatus }}
          </div>
        </div>
      </div>
    </div>
    <p :class="`ml-4 text-[#8C8C8C] text-xs mr-2`">{{ des }}</p>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";

const des = computed(() => {
  let s = "";
  const item = props.item;
  if (item.customerName) {
    s += item.customerName + " | ";
  }
  if (item.stageName) {
    s += item.stageName + " | ";
  }
  if (item.hostName) {
    s += item.hostName;
  }

  if (item.recordDurationSeconds) {
    s += " | " + formattedDuration.value;
  }
  return s;
});

const cp_reportStatus = computed(() => {
  const reportStatus = props.item.reportStatus;
  if (reportStatus == "文件处理中") {
    return "处理中";
  }
  if (reportStatus == "会话字幕量不足") {
    return "字幕不足";
  }
  if (reportStatus == "参会人身份未标注") {
    return "未标注";
  }
  if (reportStatus == "生成按钮未点击") {
    return "未点生成";
  }
  return reportStatus;
});

const cp_reportStatusColor = computed(() => {
  const reportStatus = props.item.reportStatus;
  if (reportStatus == "生成成功") {
    return "[#436BFF]";
  }
  return "[#ffa143]";
});

const isSuccessStatus = computed(() => {
  const reportStatus = props.item.reportStatus;
  return reportStatus == "生成成功";
});

const isSync = computed(() => {
  const syncStatus = props.item.syncStatus;
  return syncStatus == "已同步";
});

const formattedDuration = computed(() => {
  const seconds = props.item.recordDurationSeconds;
  if (seconds <= 0) {
    return ""; // 如果时长为0，返回空字符串
  }

  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;

  // 构建时长字符串
  let durationParts = [];
  if (hours > 0) {
    durationParts.push(`${hours}时`);
  }
  if (minutes > 0) {
    durationParts.push(`${minutes}分`);
  }
  if (secs > 0 || (hours === 0 && minutes === 0)) {
    // 确保秒数在没有小时和分钟时也显示
    durationParts.push(`${secs}秒`);
  }

  return durationParts.join(""); // 返回拼接后的字符串
});

const showRecordTag = computed(() => {
  return props.item.recognitionStatus == "2";
});

const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  isTeam: {
    type: Boolean,
  },
});
</script>

<style lang="less" scoped>
.success-tag {
  background: linear-gradient(318deg, rgba(76, 210, 244, 1), rgba(122, 30, 255, 1));
  background-color: rebeccapurple;
  width: 100px;
  height: 20px;
}

.tag-fade-enter-active,
.tag-fade-leave-active {
  transition: all 0.3s ease;
}

.tag-fade-enter-from,
.tag-fade-leave-to {
  opacity: 0;
  transform: translateX(10px);
}
</style>
